<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>商品添加</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link href="/css/admin/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/admin/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/upload.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/validate.form.js"></script>
</head>
<body>
<div class="container-fluid" style="padding-top: 20px;">

    <form class="form-horizontal" id="bookForm">

        <div class="form-group">
            <label for="bookName" class="col-md-3 control-label">名称</label>
            <div class="col-md-3">
                <input type="text" class="form-control" name="name" id="bookName" autocomplete="off"
                       required="required">
                <small class="form-text" id="nameTip">请输入合理的书籍名称。</small>
            </div>

            <div class="form-group">
                <label for="isbn" class="col-md-1 control-label">ISBN</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="isbn" id="isbn" autocomplete="off"
                           required="required">
                    <small class="form-text" id="isbnTip">请输入合理的国际标准书号</small>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="author" class="col-md-3 control-label">作者</label>
            <div class="col-md-3">
                <input type="text" class="form-control" name="author" id="author" autocomplete="off"
                       required="required">
                <small class="form-text" id="authorTip">请输入书籍对应的作者名</small>
            </div>


            <div class="form-group">
                <label for="publisher" class="col-md-1 control-label">出版社</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="publisher" id="publisher" autocomplete="off"
                           required="required">
                    <small class="form-text" id="publisherTip">请输入书籍的出版社</small>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label for="typeId" class="col-md-3 control-label">类别</label>
            <div class="col-md-3">
                <select class="form-control" id="typeId" name="typeId" size="1">
                    <option value="0">请选择</option>
                    <c:forEach items="${bookTypes}" var="type">
                        <option value="${type.id}">${type.typeName}</option>
                    </c:forEach>
                </select>
                <small class="form-text" id="typeIdTip">请选择书籍分类</small>
            </div>

            <div class="form-group">
                <label for="price" class="col-md-1 control-label">价格</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="price" id="price" autocomplete="off"
                           required="required">
                    <small class="form-text" id="priceTip">请输入合理的书籍价格</small>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label for="stock" class="col-md-3 control-label">库存</label>
            <div class="col-md-3">
                <input type="number" class="form-control" name="stock" id="stock" autocomplete="off"
                       required="required">
                <small class="form-text" id="stockTip">请输入合理的书籍库存</small>
            </div>

            <div class="form-group">
                <label for="mark" class="col-md-1 control-label">介绍</label>
                <div class="col-md-3">
                    <textarea type="text" class="form-control" name="mark" id="mark" rows="3"
                              required="required"></textarea>
                    <small class="form-text" id="markTip">请输入书籍简介</small>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="cover" class="col-md-2 control-label">封面图片</label>
            <div class="col-md-2">
                <ul class="list-inline clearfix lyear-uploads-pic">
                    <li class="col-md-2" style="height:200px; width: 200px;">
                        <a id="coverAdd" class="pic-add" title="点击上传">
                            <img src="" alt="封面图片" style="display: none" id="coverImg" height="200px;"
                                 width="200px;">
                        </a>
                        <input type="hidden" name="cover">
                        <input type="file" id="coverUpload" name="coverUpload"
                               onchange="imageUpload('coverUpload')" />
                    </li>
                </ul>
            </div>
            <div class="form-group">
                <label for="image1" class="col-md-1 control-label">详情图片1</label>
                <div class="col-md-2">
                    <ul class="list-inline clearfix lyear-uploads-pic">
                        <li class="col-md-2" style="height:200px; width: 200px;">
                            <a id="image1Add" class="pic-add" title="点击上传">
                                <img src="" alt="详情图片1" style="display: none" id="image1Img" height="200px;"
                                     width="200px;">
                            </a>
                            <input type="hidden" name="image1">
                            <input type="file" id="image1Upload" name="image1Upload"
                                   onchange="imageUpload('image1Upload')" />
                        </li>
                    </ul>
                </div>

                <label for="image2" class="col-md-1 control-label">详情图片2</label>
                <ul class="list-inline clearfix lyear-uploads-pic">
                    <li class="col-md-2" style="height:200px; width: 200px;">
                        <a id="image2Add" class="pic-add" title="点击上传">
                            <img src="" alt="详情图片2" style="display: none" id="image2Img" height="200px;" width="200px;">
                        </a>
                        <input type="hidden" name="image2">
                        <input type="file" id="image2Upload" name="image2Upload"
                               onchange="imageUpload('image2Upload')" />
                    </li>
                </ul>
            </div>
        </div>

        <div class="modal-footer">
            <button type="reset" class="btn btn-default">重置</button>
            <button type="button" class="btn btn-primary" onclick="addBook()">保存</button>
        </div>
    </form>
</div>
<script>
    function addBook() {
        if (validateBookEdit()) {
            $.post("/bookmall/admin/book/insert", $("#bookForm").serializeArray(), function (res) {
                if (res) {
                    layer.msg("信息添加成功~", {icon: 1}, function () {
                        document.getElementById("bookForm").reset();
                        $("#coverImg").attr("style", "display: none");
                        $("#image1Img").attr("style", "display: none");
                        $("#image2Img").attr("style", "display: none");
                        window.parent.parent.document.getElementById("multitabs_books").contentWindow.location.reload(true);
                    });
                } else {
                    layer.msg("信息添加失败！请确认信息是否完整或联系管理员!", {time: 1500}, function () {
                        document.getElementById("bookForm").reset();
                        window.parent.parent.document.getElementById("multitabs_books").contentWindow.location.reload(true);
                    });
                }
            });
        } else {
            layer.msg("请确认信息是否完整后再次提交！", {icon: 2}, function () {
            });
        }
    }
</script>
</body>
</html>
